<template>
  <div>
    <nav-bar title="充值明细"/>
    <div class="content_scroll">
      <ul class="tab-box">
        <li v-for="(item, index) in tabList" :key="index" class="tab-list" :class="[currentIndex == index ? 'active' : '']" @click="itemClick(index)">{{item}}</li>
      </ul>
      <ul class="display-list">
        <li v-for="(item,index) in displayList" :key="index">
          {{item}}
        </li>
      </ul>
      <div class="none-img" v-show="isShowImg">
        <img src="../../../assets/img/server/jy_none1.png" alt="">
      </div>
      <div v-show="currentIndex == 0">
        <table>
          <tbody>
            <tr v-for="(item, index) in incomeList" :key="index">
              <td>
                <span>{{item.logtime | formatTimestamp}}</span>
                <span>{{item.logtime | Timestamp}}</span>
              </td>
              <td>{{item.jiapingtaibi}}</td>
              <td class="td_remark" @click="isShowClick(index,item.content)">
                <van-popover v-model="isShowPopover[index]" trigger="click" placement="top" :actions="isActions"  class="td_remark_item">
                  <template #reference>
                  {{item.remark}}
                  <span class="remark_icon"></span>
                  </template>
                </van-popover>
              </td>
              <!-- <div class="td_content" v-show="isShow[index]">{{item.content}}</div> -->
            </tr>
          </tbody>
        </table>
      </div>
      <div v-show="currentIndex == 1">
        <table>
          <tbody>
            <tr v-for="(list, id) in outcomeList" :key="id">
              <td>
                <span>{{list.logtime | formatTimestamp}}</span>
                <span>{{list.logtime | Timestamp}}</span>
              </td>
              <td>{{list.jiapingtaibi}}</td>
              <td class="td_remark" @click="showClick(id,list.content)">
                <van-popover v-model="showPopover[id]" trigger="click" :actions="actions" placement="top"  class="td_remark_item">
                  <template #reference>
                    {{list.remark}}
                    <span class="remark_icon"></span>
                  </template>
                </van-popover>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '../../../components/common/navbar/NavBar.vue';

export default {
   data() {
    return {
      id: 0,
      isId: 0,
      isShow: [],
      actions: [],
      isActions: [],
      showPopover: [],
      isShowPopover: [],
      tabList: ["收入", "支出"],
      displayList: ['时间','金额','备注'],
      currentIndex: 0,
      //收入列表
      incomeList: [],
      //支出列表
      outcomeList: [],
    };
  },
  components: { NavBar },
  created() {
    this.getGoldInfo(this.tabIndex)
  },
  methods: {
    getGoldInfo(item) {
      this.axios.get('/recharge_'+ item + '.json', {}).then(res => {
        if(item === 1) {
          this.incomeList = res.data.list
        }else if (item === 2) {
          this.outcomeList = res.data.list
        }
      })
    },
    itemClick(index) {
      this.currentIndex = index
      this.getGoldInfo(this.tabIndex)
    },
    // showClick(id) {
    //   this.isShow = !this.isShow
    // }
    showClick(id,content) {
      this.actions = []
      const obj = {
        text: content
      }
      this.actions.push(obj)
      this.id = id
      this.showPopover[id] = true
    },
    isShowClick(index,content) {
      this.isActions = []
      const obj = {
        text: content
      }
      this.isActions.push(obj)
      this.isId = index
      this.isShowPopover[index] = true
    }
  },
  computed: {
    isShowImg() {
      if(this.incomeList === null) {
        return true
      } else {
        return false
      }
    },
    tabIndex() {
      if(this.currentIndex == 0) {
        return 1
      }else if (this.currentIndex == 1) {
        return 2
      }
    }
  },
  filters: {
    getFixed(e) {
      return e.toFixed(2)
    },
    formatTimestamp( timestamp ) {
      var dateObj = new Date( timestamp * 1000 );   
      var year = dateObj.getYear() + 1900;
      var month = dateObj.getMonth() + 1;
      var theDate = dateObj.getDate();
      var hour = dateObj.getHours();
      var minute = dateObj.getMinutes();
      var second = dateObj.getSeconds();
  //     return year +"-"+ month +"-" + theDate + " "+ hour +":"+ minute +":"+ second;     
      return year +"-"+ month +"-" + theDate     
    },
    Timestamp( timestamp ) {
      var dateObj = new Date( timestamp * 1000 );   
      var year = dateObj.getYear() + 1900;
      var month = dateObj.getMonth() + 1;
      var theDate = dateObj.getDate();
      var hour = dateObj.getHours();
      var minute = dateObj.getMinutes();
      minute = minute < 10? '0' + minute : minute;
      var second = dateObj.getSeconds();
      second = second < 10? '0' + second : second;
      return hour +":"+ minute +":"+ second
    }
  }
}
</script>

<style scoped>
.content_scroll {
  background: #fff;
}

.tab-box {
  position: relative;
  width: 10rem;
  height: 1.333333rem;
  font-size: .373333rem;
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.active {
  position: relative;
  /* height: 100px; */
  color: #ff5543;
  z-index: 2;
}

.active::before {
  content: "";
  position: absolute;
  bottom: -0.453333rem;
  left: 0;
  width: 100%;
  height: .08rem;
  background: #ff5543;
  z-index: 1;
}

.display-list {
  width: 100%;
  height: 1.333333rem;
  border-top: .013333rem solid #eeeeee;
  border-bottom: .013333rem solid #eeeeee;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: .373333rem;
  color: #666666;
}

.none-img,
.none-img img {
  margin: .4rem auto 0;
  width: 9.6rem;
  height: 3.466667rem;
}

table,tbody {
  width: 10rem;
}

tr {
  display: flex;
  font-size: .32rem;
  position: relative;
}

td {
  display: flex;
  flex: 1;
  height: 1.4rem;
  align-items: center;
  justify-content: center;
}

tr td:first-child {
  display: flex;
  flex-direction: column;
}

tr td:nth-child(2) {
  color: #ff5543;
  font-weight: bold;
}

.van-popover {
  font-size: .4rem;
}

.td_remark {
  position: relative;
}

.van-popover {
  position: absolute;
  top: 0;
  right: 0;
}

.td_remark .remark_icon::before {
  content: "";
  display: block;
  margin-left: .08rem;
  /* margin-top: -10px; */
  width: 0;
  height: 0;
  border-right: .106667rem solid transparent;
  border-left: .106667rem solid transparent;
  border-top: .106667rem solid #222;
}

.td_remark_item {
  display: flex;
  align-items: center;
}

</style>